<template>
  <div class='not-single' id='not-app-article'>
    <main id="main" class='site-main grid' role="main">
      <header class="page-header">
        <h2 class="page-title fade-before fade-after">与我成为朋友</h2>
        <div class="taxonomy-des fade-before fade-after">
          <p>我非常并且迫切地希望能在您热情地提交之前，看到我们的交流互动，生活博客比较看重仪式感，所以不妨让我们互相了解使得连接更紧实吧。</p>
        </div>
        <nav class="taxonomy-des fade-before fade-after">
          <ul id="copy" class="my-info">
            <li @click='copyInfo(websiteConfig.name)'><span>站名</span><em>{{ websiteConfig.name }}</em></li>
            <li @click='copyInfo(websiteConfig.authorIntro)'><span>简述</span><em>{{ websiteConfig.authorIntro }}</em></li>
            <li @click='copyInfo("3303295829@qq.com")'><span>邮箱</span><em>3303295829@qq.com</em></li>
            <li @click='copyInfo(websiteConfig.websiteUrl)'><span>链接</span><em>{{ websiteConfig.websiteUrl }}</em></li>
            <li @click='copyInfo(websiteConfig.websiteUrl)'><span>订阅</span><em>{{ websiteConfig.websiteUrl }}</em></li>
            <li @click='copyInfo(websiteConfig.websiteAvatar)'><span>标识</span><em>{{ websiteConfig.websiteAvatar }}</em></li>
          </ul>
        </nav>
      </header>
      <article class='page type-page status-publish hentry'>
        <section class='entry-content'>
          <h6 class="heading">说明</h6>
          <ul class="add-content-info">
            <li>
              <strong>要求</strong>
              <br>交流互动并且保持联系；
              <br>至少有 10 篇原创文章；
              <br>请提前做好本站链接。
            </li>
            <li>
              <strong>顺序</strong>
              <br>首序：添加顺序为基础；
              <br>次序：然后以 RSS 动态里第一条的时间逐个降序。
            </li>
            <li>
              <strong>背景</strong>
              <br>由用户提交生成，如果图片地址所属服务器的 IP（在国外）无法访问您的站点或访问 IP 不稳定，则背景会出现错误。
            </li>
          </ul>
          <h6 class="apply-title">快速申请</h6>
          <FriendApply/>
        </section>
      </article>
    </main>
  </div>
</template>

<script lang='ts'>
import FriendApply from '@/components/FriendComponents/FriendApply.vue'
import { computed, defineComponent } from 'vue'
import { useAppStore } from '@/stores/app'
import { copyInfo } from '@/utils/validate'

export default defineComponent({
  name: 'FriendAdd',
  methods: { copyInfo },
  components: { FriendApply },
  setup(){
    const appStore = useAppStore()
    return{
      websiteConfig: computed(() => {
        return appStore.websiteConfig
      })
    }
  }
})
</script>

<style scoped>
.site-main{
    padding-inline: var(--edge-lr);
    margin-inline: auto;
}
h6.apply-title {
    margin: 1rem 0;
}
.page-header .fade-before {
    --trfm: translateX(1rem);
}
.taxonomy-des p{
    margin: 1.5em 0;
    line-height: 2;
}
.page-title {
    color: rgb(var(--color-rgb) / .7);
    font-family: var(--font-family-slogn);
    font-weight: 400;
    line-height: 1.5;
}
.my-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1.5rem;
}
.my-info li {
    position: relative;
    flex: none;
    white-space: pre;
    display: flex;
    align-items: center;
    gap: 1em;
    cursor: pointer;
    transition: .3s;
}
.my-info li::before {
    content: "";
    width: 6px;
    height: 150%;
    background: linear-gradient(180deg,#0000,rgb(var(--color-rgb) / 20%),#0000) no-repeat center / 2px 100%, radial-gradient(circle,rgb(var(--color-rgb) / 70%) 50%,#0000 50%) no-repeat center / 6px 6px;
    position: absolute;
    top: 0;
    left: -1.5rem;
    bottom: 0;
    margin: auto;
    transition: .5s;
}
.my-info li::after {
    content: "\e637";
    font-family: iconfont;
    margin: 0 0 0 -0.5em;
}
.my-info em {
    font-size: .75rem;
}
.hentry:where(.page) {
    animation: var(--animation-ot);
    animation-delay: .3s;
}
.hentry {
    padding: var(--edge-lr) calc(var(--edge-lr)*2) var(--edge-lr) var(--edge-lr);
    background: var(--s-bg, rgb(255 255 255 / .7));
    box-shadow: var(--box-shadow-white);
    border-radius: var(--radius) 0 0 var(--radius);
    margin-right: calc(var(--edge-lr)*-1);
}
.entry-content {
    width: min(var(--content-size, 60rem),100%);
    margin-inline: auto;
    letter-spacing: .01em;
    line-height: 2.5;
    text-align: justify;
    word-break: break-all;
    overflow-wrap: anywhere;
    counter-reset: section;
}
.entry-content {
    --content-width: 1000px;
    margin-left: 0;
}
.page .entry-content {
    width: 100%;
}
.add-content-info {
    display: grid;
    gap: 1.5rem;
    grid: auto / repeat(auto-fill, minmax(min(22.5rem,100%), 1fr));
    margin: 0;
    list-style: none;
}
.add-content-info li {
    background: var(--s-bg, rgb(255 255 255 / .7));
    padding: 1.5rem;
    box-shadow: var(--box-shadow-white);
    border-radius: var(--radius);
}
@media (min-width: 1153px) {
    .site-main{
        grid: 1fr / clamp(15rem, 15vw, var(--card-size)) 1fr;
        gap: 3rem;
        place-items: stretch;
    }
    .page-header {
        --edge: calc(var(--edge-tb) + var(--gap-divs));
        grid-area: 1 / 1 / 2 / 2;
        position: sticky;
        top: var(--edge);
        height: calc(100vh - var(--edge) * 2);
        align-content: center;
    }
}
</style>
